<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model radio单选框</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <!-- input标签 radio属性 -->
        <!-- 当单选框被选中时，v-model绑定的数据属性的值被被设置为该单选框的value值。-->
        <!-- h5 添加name属性形成互斥 -->
        <label for="male">
            <input type="radio" id="male" value="男" v-model="sex">男
        </label>
        <!-- 一旦通过v-model绑定了，radio属性的input标签就可以不用name也能实现互斥 -->
        <label for="female">
            <input type="radio" id="female" value="女" v-model="sex">女
        </label>
        <h2>{{sex}}</h2>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{ 
                msg:'hello world',
                sex:'女'//设置默认值
            }
        })
    </script>   
</body>
</html>